<template>
  <div>
    <Middle class="middle">
      <Main class="main">
        <el-card>
          <el-tabs
            stretch
            v-model="activeName"
            type="border-card"
            @tab-click="test"
          >
            <el-tab-pane label="账号与密码" name="userConfig">
              <UserConfig></UserConfig>
            </el-tab-pane>
            <!-- <el-tab-pane label="个人资料" name="userDetail">
              <UserDetail></UserDetail>
            </el-tab-pane> -->
          </el-tabs>
        </el-card>
      </Main>
      <Aside class="aside">
        <CenterAside></CenterAside>
      </Aside>
    </Middle>
  </div>
</template>

<script>
import Middle from "../../layout/Middle";
import Aside from "../../layout/Aside";
import Main from "../../layout/Main";
import CenterAside from "./centerAside";
import UserConfig from "./userConfig";
import CommentConfig from "./commentConfig";
import UserDetail from "./userDetail";
import { log } from "util";

export default {
  name: "center",
  components: {
    UserDetail,
    CommentConfig,
    UserConfig,
    CenterAside,
    Main,
    Aside,
    Middle,
  },
  data() {
    return {
      activeName:'userConfig'
    };
  },
  async created() {},
  methods: {
    test(one, two, three) {
      console.log(one, two, three);
    },
  },
};
</script>

<style lang="less" scoped>
.middle {
  display: flex;
}
/deep/ .main .el-card__body {
  padding: 0;
}

@media screen and (max-width: 1024px) {
  .middle {
    display: block;
  }
}
</style>
